<template>
<view class="search-container">
  <!-- 搜索框 -->
  <view class="search-box">
    <uni-search-bar
      v-model="searchKey"
      placeholder="输入城市/区域/租金搜索"
      :radius="100"
      @confirm="handleSearch"
    />
  </view>

  <!-- 筛选条件 -->
  <view class="filter-box">
    <uni-data-checkbox
      v-model="filterParams.roomType"
      :localdata="roomTypes"
      @change="handleFilter"
    />
    <uni-section title="价格区间" type="line">
      <!-- <uni-slider
        v-model="filterParams.price"
        :min="0"
        :max="20000"
        :step="500"
        @change="handleFilter"
      /> -->
    </uni-section>
  </view>

  <!-- 搜索结果 -->
  <scroll-view
    scroll-y
    class="result-list"
    @scrolltolower="loadMore"
  >
    <house-card
      v-for="item in houseList"
      :key="item.id"
      :data="item"
      @click="goDetail(item.id)"
    />
    <uni-load-more :status="loadingStatus" />
  </scroll-view>
</view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { getHouseList } from '@/api/houseApi'
import type { IHouseItem } from '@/types/house'

export default defineComponent({
  components: {
    HouseCard: () => import('@/components/custom/houseCard.vue')
  },

  setup() {
    const searchKey = ref('')
    const houseList = ref<IHouseItem[]>([])
    const loadingStatus = ref<'more' | 'loading' | 'noMore'>('more')
    const pageParams = reactive({ page: 1, pageSize: 10 })

    const filterParams = reactive({
      city: '',
      price: 0,
      roomType: '',
      area: ''
    })

    const roomTypes = [
      { value: '', text: '全部' },
      { value: '1室', text: '一室' },
      { value: '2室', text: '两室' },
      { value: '3室', text: '三室' }
    ]

    const loadData = async (reset = false) => {
      try {
        loadingStatus.value = 'loading'
        if (reset) pageParams.page = 1

        const params = {
          ...filterParams,
          ...pageParams,
          keywords: searchKey.value
        }

        //const res = await getHouseList(params)
        //houseList.value = reset ? res.data : [...houseList.value, ...res.data]
        //loadingStatus.value = res.data.length < pageParams.pageSize ? 'noMore' : 'more'
      } catch (err) {
        uni.showToast({ title: '加载失败', icon: 'none' })
        loadingStatus.value = 'more'
      }
    }

    const handleSearch = () => loadData(true)
    const handleFilter = () => loadData(true)
    const loadMore = () => {
      if (loadingStatus.value === 'more') {
        pageParams.page++
        loadData()
      }
    }

    const goDetail = (id: string) => {
      uni.navigateTo({ url: `/pages/tenant/detail/index?id=${id}` })
    }

    return {
      searchKey,
      houseList,
      filterParams,
      roomTypes,
      loadingStatus,
      handleSearch,
      handleFilter,
      loadMore,
      goDetail
    }
  }
})
</script>

<style lang="scss" scoped>
.search-container {
  padding: 20rpx;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.search-box {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08);
}

.filter-box {
  background: #fff;
  margin-top: 20rpx;
  border-radius: 16rpx;
  padding: 20rpx;
}

.result-list {
  flex: 1;
  margin-top: 20rpx;
  height: calc(100vh - 400rpx);
}
</style>